<!DOCTYPE html>
<html>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<%@include file="/resources/components/baseIncl/base/css.inc"%>
<link href="<%=request.getContextPath()%>/resources/components/baseIncl/css/jquery-ui.css" rel="StyleSheet" type="text/css"/>
<style>
.ui-dialog-titlebar{
	background-color: #955CA3;
	color: white;	
}
</style>
<%@include file="/resources/components/baseIncl/base/js.inc"%>
<script src="<%=request.getContextPath()%>/resources/components/baseIncl/js/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
	$("#options").show();
	
	 $(document).scroll(function() {
	 	var top = $(document).scrollTop();
	 	
	 	if(top > 60){
	 		$("#dateSelect").removeClass("dtSelectRelative");
	 		$("#dateSelect").addClass("dtSelectFixed");
	 		$("#dateSelect").val("Proceed");
	 	}else{
	 		$("#dateSelect").removeClass("dtSelectFixed");
	 		$("#dateSelect").addClass("dtSelectRelative");
	 		$("#dateSelect").val("Click To Proceed");
	 	}
	 });
});
function showCalendarAndHideOptions(){
	var selectItems = $("input[type=checkbox]:checked").map(function(_,el){
		return $(el).val();
	}).get();
	if(selectItems != null && selectItems != ""){
		$("#options").hide();
		$("#bookingCalendar").fullCalendar({
			events: '/client_booking_ajax.jsp?populateCalendarEvents',
			header: {
				left: 'title',
				right: 'month,basicWeek,basicDay'
			},
			dayClick: function(date){
				var currentDate = new Date();
				
				if(currentDate > date){
					alert("Treatments can't be booked on the current day, neither can treatments be booked in the past");
				}else{
					var selectedDate = $.datepicker.formatDate('yy-mm-dd', date);
			 		
					$( "#dialog-confirm" ).dialog({
			 			resizable: false,
			 			height:300,
			 			modal: true,
			 			create: function(event,ui){
			 				$.ajax({
			 					url:"/client_booking_ajax.jsp?timeList",
			 					async: false,
			 					dataType:"json",
			 					success:function(data){
			 						var html ="<p><strong><br>Please select a treatment start time. Select confirm to proceed or cancel to start over.</strong></p>";
			 						html +="<select id='time'>";
			 						$.each(data,function(idx,tt){
			 								html+= "<option>"+tt.time+"</option>";
			 						});
			 						html+="</select>";
			 						$("#dialog-confirm").append(html);
			 					}
			 				});
			 			},
			 			buttons: {
			 				"Confirm": function() {
			 					var time = $("#time").val();
			 					var concatDateTime =  selectedDate + " " + time;
			 					var confirm = null;
						 		$.ajax({
						 			url: "/client_booking_ajax.jsp?checkTime&appointmentDate="+concatDateTime+"&items="+selectItems,
						 			async:false,
						 			success: function(resp){
						 				if($.trim(resp)=="success"){
					 						alert("Booking was successfully created, You will now be redirected to view your booking");
						 					confirm = "true";
						 				}else{
						 					alert($.trim(resp));
						 					confirm = "false";
						 				}
						 			}
						 		});
						 		$( "#dialog-confirm" ).dialog( "close" );
						 		if(confirm=="true"){
					 				window.location.href = '/view_schedule.jsp';
						 		}else{
						 			window.location.href = '/BookingAction?view';
						 		}
			 				},
			 				Cancel: function() {
			 					$( "#dialog-confirm" ).dialog( "close" );
			 					window.location.href = '/BookingAction?view';
			 				}
			 			}
			 		});
				}
			}		
		});
	}else{
		alert("Please select a treatment before proceeding.");
	}
}
</script>
</head>
<body>
	<div id="wrapper" >
		<div id="Heading3">Start Booking<a href="/amphora_home.jsp"><i class="fa fa-mail-reply"></i></a></div>
		<div id="content">
			<div id="options">	
			  <div><input type="button" name="dateSelect" id="dateSelect" class="dtSelectRelative" onclick="showCalendarAndHideOptions();" value="Click To Proceed"></div>	
			  <br><br>
			  <c:forEach var="c" items="${categories}">
			  	<table cellpadding="3">
			  		<tr>
			  			<td class="trHeading" colspan="2"><c:out value="${c.name}"></c:out> </td>
			  		</tr>
			  		<%int count = 0; %>
		    		<c:forEach var="tt" items="${treatment}">
		    			<%count++; %>
		    			<c:if test="${tt.category.id == c.id}">
			    		<%if(count%2==0){ %>
			    		<tr class="evenRow">
			    		<%}else{ %>
			    		<tr class="oddRow">
			    		<%} %>
			    			<td class="space1">
			    				<input type="checkbox" name='<c:out value="${tt.id}"></c:out>' value='<c:out value="${tt.id}"></c:out>'/>
			    			</td>
			    			<td class="space2">
			    				<strong>
			    					<c:out value="${tt.name}"></c:out>
				                	<c:out value="${tt.description}"></c:out><br>
				                	R<c:out value="${tt.price}"></c:out><br>
				                	<c:out value="${tt.treatmentDuration}"></c:out> minutes
				                </strong>
			    			</td>
			    		</tr>
		    			</c:if>
		    		</c:forEach>
		    	</table>
			  </c:forEach>
			</div>	
		</div>
		<div id="bookingCalendar" class="calendarStyle"></div>
		<div id="dialog-confirm" title="Select Treatment Time">
		</div>
	</div>
</body>
</html>